<!DOCTYPE html>
<html lang="en">

<head>
    @@include('meta.html')
    <title>个人中心</title>
    <style>
        body.hidden {
            min-width: 1400px;
            overflow-x: auto
        }
    </style>
</head>

<body class="hidden">
    @@include('header.html')

    @@include('user-center-banner.html')
    <div class="j-userCenter-tip clearfix">
        <div class="left clearfix j-menu-title">
            <span class="left titleText">个人中心</span><img src="images/icon/next.png" alt="" class="left title-ico">
            <ul class="left clearfix classify">
                <li>安全中心</li>
                <li>绑定google认证</li>
            </ul>
        </div>
    </div>
    <div class="j-userCenter-content">
        
        <div class="clearfix hidden">
            @@include('club-personal.html')
            <div class="y-content-r">
                
                <div class="clearfix y-location-r">
                    <span class="fl mr40">绑定google认证</span>
                    <span class="fr j-title-tip mr20">谷歌验证码主要用于登录、提现、场外交易、修改安全设置等操作的安全验证</span>
                </div>
                <div class="j-userCenter-content-r">
                    <div class="clearfix j-safety-box">
                        <ul class="clearfix j-payment-card none">
                            <li class="border-b">
                                <div class="clearfix j-card-li">
                                    <div class="fl payment-value">
                                        <span class="">谷歌验证器是一款动态口令工具，工作原理类似短信动态验证。绑定后每30s生成一个动态验证码，验证码可用于登录、提现、修改安全设置等操作的安全验证。</span>
                                    </div>
                                    <div class="fr clearfix">
                                        <span class="fl j-operate-text pointer ml20">去修改</span>
                                    </div>
                                </div>
                            </li>
                            <li class="">
                                <div class="j-card-li">
                                    <div class="payment-value">
                                        <span class="">步骤一：下载google验证器APP</span>
                                        <span class="ml10 j-tip-text">iOS用户登录App Store搜索“Authenticator”下载；安卓用户登录应用商店或使用手机浏览器搜索“谷歌验证器”下载。</span>
                                    </div>
                                    <div class="clearfix mt10">
                                        <span class="j-btn j-primary-btn j-plain-btn j-md-btn pointer"><img src="images/icon/appleIco.png" class="fl mt10">APP Store</span>
                                        <span class="j-btn mt10 j-primary-btn j-plain-btn j-md-btn pointer"><img src="images/icon/googlePlayIco.png" class="fl mt10">Google play</span>
                                    </div>
                                </div>
                            </li>
                            <li class="">
                                <div class="j-card-li">
                                    <div class="payment-value">
                                        <span class="">步骤二：在谷歌验证器中添加密钥并备份</span>
                                        <span class="ml10 j-tip-text">打开谷歌验证器，扫描下方二维码或手动输入下述密钥添加验证令牌；</span>
                                    </div>
                                    <div class="">
                                        <span class="j-important-text">密钥用于手机更换或遗失时找回谷歌验证器，绑定前请务必将下述密钥备份保存。</span>
                                    </div>
                                    <div class="clearfix">
                                        <img src="images/qrcode.jpg" class="fl j-qrcode-img">
                                        <div class="fl ml60 mt20">
                                            <span class="payment-way mt20">密钥：<span class="j-key-text">5GMOE7UI5XF7SFUR </span></span>
                                            <span class="j-copy-btn">复制密钥</span>
                                        </div>
                                    </div>
                                    <div class="w40 ptb20">
                                        <span class="j-btn j-primary-btn j-plain-btn j-lg-btn pointer">下一步</span>
                                    </div>
                                    
                                </div>
                            </li>
                        </ul>
                        <ul class="clearfix j-payment-card">
                            <li class="">
                                <div class="j-card-li">
                                    <div class="payment-value w25">
                                        <span class="">步骤三：输入谷歌验证器中6位验证码</span>
                                    </div>
                                    <div class="clearfix mt20">
                                        <span class="fl j-auth-text md-width">谷歌验证码：</span>
                                        <input class="fl j-auth-google" />
                                    </div>
                                    <div class="j-auth-operate md-width mt20">
                                        <span class="j-btn mt10 j-primary-btn j-plain-btn j-md-btn pointer">确认绑定</span>
                                    </div>
                                </div>

                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 添加支付方式 -->
    <div class="y-popBox y-order-pop none">
        <div class="popbg"></div>
        <div class="pop_box no-padding">
            <div class="y-pop-order">
                <div class="y-pop-location clearfix">
                    <span class="fl">添加支付方式</span>
                </div>
                <div class="clearfix j-withdraw-box">
                    <!-- 银行卡 -->
                    <div class="j-withdraw-addr-box j-payment-box">
                        <div class="mt10">
                            <span class="j-withdraw-text">支付方式</span>
                            <div class="addr-filterList j-withdraw-addr left">
                                <select class="addr-select-box left">
                                    <option class="addr-option" value="1" selected>银行卡</option>
                                    <option class="addr-option" value="2">微信</option>
                                    <option class="addr-option" value="3">支付宝</option>
                                </select>
                                <div class="addr-replace addr-replace-width">  
                                    <div class="addr-current">银行卡</div>  
                                    <ul class="addr-options options-width"> 
                                        <li rel="1"><span class="addr-value">银行卡</span></li>  
                                        <li rel="2"><span class="addr-value">微信</span></li>
                                        <li rel="3"><span class="addr-value">支付宝</span></li>
                                    </ul>  
                                </div>  
                            </div>
                        </div>
                        <div class="mt10">
                            <span class="j-withdraw-text">姓名</span>
                            <input class="j-withdraw-addr" placeholder="请输入姓名"  />
                        </div>
                        <div class="mt10">
                            <span class="j-withdraw-text">开户行</span>
                            <input class="j-withdraw-addr" placeholder="请输入开户行"  />
                        </div>
                        <div class="mt10">
                            <span class="j-withdraw-text">开户支行<span class="plr5">(必填)</span></span>
                            <input class="j-withdraw-addr" placeholder="格式：______省______市______（区/镇/县）______支行" />
                        </div>
                        <div class="mt10">
                            <span class="j-withdraw-text">银行卡号</span>
                            <input class="j-withdraw-addr" placeholder="请输入银行卡号"  />
                        </div>
                    </div>
                    <!-- 微信 -->
                    <div class="j-withdraw-addr-box j-payment-box" style="display: none;">
                        <div class="mt10">
                            <span class="j-withdraw-text">支付方式</span>
                            <div class="addr-filterList j-withdraw-addr left">
                                <select class="addr-select-box left">
                                    <option class="addr-option" value="1">银行卡</option>
                                    <option class="addr-option" value="2" selected>微信</option>
                                    <option class="addr-option" value="3">支付宝</option>
                                </select>
                                <div class="addr-replace addr-replace-width">  
                                    <div class="addr-current">微信</div>  
                                    <ul class="addr-options options-width"> 
                                        <li rel="1"><span class="addr-value">银行卡</span></li>  
                                        <li rel="2"><span class="addr-value">微信</span></li>
                                        <li rel="3"><span class="addr-value">支付宝</span></li>
                                    </ul>  
                                </div>  
                            </div>
                        </div>
                        <div class="mt10">
                            <span class="j-withdraw-text">姓名</span>
                            <input class="j-withdraw-addr" placeholder="请输入姓名"  />
                        </div>
                        <div class="mt10">
                            <span class="j-withdraw-text">微信账号</span>
                            <input class="j-withdraw-addr" placeholder="请输入微信账号"  />
                        </div>
                        <div class="mt10">
                            <span class="j-withdraw-text">收款二维码</span>
                            <div class="j-upload-box">
                                <img src="images/icon/upload.png" class="j-upload-ico">
                                <span class="j-upload-tip mt10">请上传您的微信收款二维码图片(*.jpg / *.png / *.jpeg)</span>
                                <input type="file" class="j-upload-input" />
                            </div>
                        </div>
                    </div>
                    <!-- 支付宝 -->
                    <div class="j-withdraw-addr-box j-payment-box" style="display: none;">
                        <div class="mt10">
                            <span class="j-withdraw-text">支付方式</span>
                            <div class="addr-filterList j-withdraw-addr left">
                                <select class="addr-select-box left">
                                    <option class="addr-option" value="1">银行卡</option>
                                    <option class="addr-option" value="2">微信</option>
                                    <option class="addr-option" value="3" selected>支付宝</option>
                                </select>
                                <div class="addr-replace addr-replace-width">  
                                    <div class="addr-current">支付宝</div>  
                                    <ul class="addr-options options-width"> 
                                        <li rel="1"><span class="addr-value">银行卡</span></li>  
                                        <li rel="2"><span class="addr-value">微信</span></li>
                                        <li rel="3"><span class="addr-value">支付宝</span></li>
                                    </ul>  
                                </div>  
                            </div>
                        </div>
                        <div class="mt10">
                            <span class="j-withdraw-text">姓名</span>
                            <input class="j-withdraw-addr" placeholder="请输入姓名"  />
                        </div>
                        <div class="mt10">
                            <span class="j-withdraw-text">支付宝账号</span>
                            <input class="j-withdraw-addr" placeholder="请输入支付宝账号"  />
                        </div>
                        <div class="mt10">
                            <span class="j-withdraw-text">收款二维码</span>
                            <div class="j-upload-box">
                                <img src="images/icon/upload.png" class="j-upload-ico">
                                <span class="j-upload-tip mt10">请上传您的支付宝收款二维码图片(*.jpg / *.png / *.jpeg)</span>
                                <input type="file" class="j-upload-input" />
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="clearfix pop_button">
                <div class="fl">
                    <button class="y-btn y-popCancel-btn y-plain-btn y-md-btn">取消</button>
                </div>
                <div class="fr text-r">
                    <button class="y-btn y-lilace-btn y-plain-btn y-md-btn" onclick="fillPassword()">确认</button>
                </div>
            </div>
        </div>
    </div>

    <!-- 填写资金密码 -->
    <div class="y-popBox y-passwordWay-pop none">
        <div class="popbg"></div>
        <div class="pop_box no-padding">
            <div class="p20 fs24 text-l">
                资金密码：
            </div>
            <div class="border-b">
                <div class="y-pop-input-box">
                    <input class="y-input y-pop-input" type="text" placeholder="请填写您的资金密码">
                </div>
            </div>
            <div class="clearfix pop_button">
                <button class="y-btn y-lilace-btn y-plain-btn y-lg-btn">确定添加</button>
            </div>
        </div>
    </div>
    @@include('footer-js.html')
    <script type="text/javascript" src="js/laydate/laydate.js"></script>
    <script type="text/javascript">
        $(document).ready(function() {
            var lis = $(".addr-options li");

            for (var i = 0; i < lis.length; i++) {
                lis[i].onclick = function(e) {
                    e.stopPropagation();
                    $(this).parents('.addr-filterList').find('.addr-select-box').val(this.getAttribute("rel"));
                    $(this).parents(".addr-options").hide();
                    $(this).parents('.addr-replace').find(".addr-current").html($(this).find('.addr-value').html());
                    getSelectVal(this);
                }
            }
            $(".addr-replace").click(function(e) {
                e.stopPropagation();
                $(this).find(".addr-options").show();
            })
            $(":not(.addr-replace)").click(function() {
                $(this).find(".addr-options").hide();
            })

            // 添加支付方式
            $('.y-orderPop-show').click(function() {
                $('.y-order-pop').removeClass('none');
            })
        
        });

        //自动获取
        function getSelectVal(val) {
            $('.j-payment-box').eq($(val).attr("rel")).show().siblings().hide();
            console.log($(val).attr("rel"), $(val).find('.addr-value').html());
        }


        function payOrNot(e) {
            if ($(e).is(':checked')) {
                $(e).siblings('.y-checked').removeClass('none');
                $(e).siblings('.y-check').addClass('none');
            } else {
                $(e).siblings('.y-checked').addClass('none');
                $(e).siblings('.y-check').removeClass('none');
            }
            console.log($(e).is(':checked'));
        }

        // 资金密码
        function fillPassword() {
            $('.y-popBox').addClass('none');
            $('.y-passwordWay-pop').removeClass('none');
        }
    </script>
</body>

</html>